<template>
    <el-row class="tac"
            style="height:100%">
        <el-col :span="24"
                style="height:100%">
            <el-menu :default-active="$route.path"
                     class="el-menu-vertical-demo"
                     router
                     style="height:100%"
                     unique-opened
                     @select="handleSelect"
                     @open="handleOpen"
                     @close="handleClose">

                <template v-for="(menu,index) in menuList">
                    <template v-if="menu.children && menu.children.length > 0">
                        <el-submenu :index="menu.path"
                                    :key="menu.path">
                            <span slot="title">{{menu.meta.title}}</span>
                            <template v-for="item in menu.children">
                                <el-menu-item :index="item.path"
                                              :key="item.path">
                                    <span slot="title">{{item.meta && item.meta.title}}</span>
                                </el-menu-item>
                            </template>
                        </el-submenu>
                    </template>
                    <template v-else>
                        <el-menu-item :index="menu.path"
                                      :key="index">
                            <span slot="title">{{menu.meta.title}}</span>
                        </el-menu-item>
                    </template>

                </template>

                <!-- <template v-for="(menu,index) in menuList">
                    <template v-if="menu.meta.isExtend">
                        <el-submenu :index="menu.meta && menu.meta.path"
                                    :key="index">
                            <span slot="title">{{menu.meta.title}}</span>
                            <template v-for="item in menu.children">
                                <el-menu-item :index="item.path"
                                              :key="item.path"
                                              v-show="item.meta && item.meta.isShow">
                                    <span slot="title">{{item.meta && item.meta.title}}</span>
                                </el-menu-item>
                            </template>
                        </el-submenu>
                    </template>
                    <template v-else>
                        <el-menu-item :index="menu.path"
                                      v-show="!menu.meta.isHide"
                                      :key="index">
                            <span slot="title">{{menu.meta.title}}</span>
                        </el-menu-item>
                    </template>

                </template> -->

            </el-menu>
        </el-col>
    </el-row>
</template>

<script>
import routers from '../router/router'
import router from '../router/index'
import Layout from '../views/layout/index'

import { mapState, } from 'vuex'

export default {
    data() {
        return {
            // menuList: []
        }
    },
    mounted() {

    },
    computed: {
        ...mapState({
            menuList: state => {
                return state.menu.currentMenus
            }
        }),
    },

    methods: {
        initCurrentMenu() {
            var currentJsonUser = localStorage.getItem("currentUser");
            var currentUser = JSON.parse(currentJsonUser);
            var userName = currentUser && currentUser.username;
            this.$store.dispatch('getCurrentMenu', userName).then(list => {
                this.menuList = list
            })
        },

        editMenuList(list) {
            if (!list) return
            let btnsList = []
            let menuList = []
            list.forEach(item => {
                let param = {
                    path: item.href,
                    // component: '',
                    meta: { title: item.title },
                    children: null
                }
                if (item.children.length > 0) {
                    // param.component = () => import('@/views/layout/index')
                    param.children = []
                    item.children.forEach(item2 => {
                        //按钮
                        if (item2.data && item2.data.type == 1) {
                            btnsList.push(item2.href)
                        } else {
                            let param2 = {
                                path: item2.href,
                                // component: () => import('@/views/customer/CustomerIndex'),
                                meta: { title: item2.title },
                            }
                            param.children.push(param2)
                        }

                    })
                }

                menuList.push(param)
            })
            this.menuList = menuList
        },
        handleOpen(path) {

            // this.$router.push({ path: path })
        },
        handleClose() {

        },
        handleSelect() {

        }
    }
}
</script>

<style>
</style>